<template>
  <!-- 气泡框 -->
  <div class="alertBox">
    <main>
      <slot name="body">
      </slot>
    </main>
    <footer>
      <slot name="footer">
      </slot>
    </footer>
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
// 气泡框
.alertBox {
  position: fixed;
  top: .3333rem;
  left: 50%;
  z-index: 222;
  color: white;
  background-color: #cfc6d5;
  border-radius: .1rem;
  padding: .1667rem;
  width: 2.5rem;
  transform: translateX(-50%);

  main {
    padding-top: .1667rem;
    font-size: .3333rem;
    text-align: center;
  }

  footer {
    padding-top: .1667rem;
    font-size: .3rem;
    text-align: center;
  }
}
</style>